<template>
    <h1>三级联动</h1>
    <el-cascader :options="regionData" @change="handleChange" v-model="arr"/>
    {{ arr }}
    <button @click="showAddress">回显</button>
</template>

<script setup>
    //获取省市区 npm i  element-china-area-data -S
    import {provinceAndCityData,pcTextArr,regionData,pcaTextArr,codeToText} from "element-china-area-data";
    import {ref} from "vue";
    let arr = ref([]);
    let handleChange = (val)=>{
        console.log(val);
        //向后台传value
        console.log(Array.from(val));
        // 向后台传lable[]
        var valArr = Array.from(val);
        let newArr = [];
        valArr.forEach(item=>{
            newArr.push(codeToText[item])
        })
        console.log(newArr);
        var address = newArr.join(" ");
        console.log(address);
        
        // 调接口
    }
    let showAddress = ()=>{
        let address ="天津市 市辖区 和平区";
        let addressArr = address.split(" ");
        console.log(addressArr);
        let proviceFlag = regionData.find(v=> v.label == addressArr[0]);
        let cityFlag = proviceFlag.children.find(v=> v.label == addressArr[1]);
        let countyFlag = cityFlag.children.find(v=> v.label == addressArr[2]);
        console.log(proviceFlag.value,cityFlag.value,countyFlag.value);
        arr.value = [proviceFlag.value,cityFlag.value,countyFlag.value]
    }
</script>

<style lang="less" scoped>

</style>